<template>
	<view>
		<view class="flex-column p-30" style="gap: 30rpx;" v-if="!noData">
			<view class="card p-30 flex-row align-center justify-between" v-for="(item,index) in list" :key="index">
				<view class="flex-column" style="gap: 10rpx;">
					<view class="fw-700 w-full">
						{{item.memo}}
					</view>
					<view class="">
						{{$u.timeFormat(item.createtime, 'yyyy年mm月dd日')}}
					</view>
				</view>
				<view class="flex-column align-center justify-center" style="gap: 10rpx;">
					<view class="price-color">
						{{item.money}}
					</view>
					
				</view>
				<view class="">
					<template v-if="item.status == 0">
						<u-button @click="pay(item)" text="上传" size="mini"></u-button>
					</template>
					<template v-else-if="item.status == 1">
						<u-text type="primary" text="已支付"></u-text>
					</template>
					<template v-else-if="item.status == 2">
						<u-text type="success" text="已确认"></u-text>
					</template>
					<template v-else-if="item.status == -1">
						<u-text type="error" text="已拒绝"></u-text>
					</template>
				</view>
			</view>
			<u-loadmore marginTop="60rpx" :status="status" />
		</view>
		<template v-else>
			<u-empty marginTop="120rpx" mode="data">
			</u-empty>
		</template>

		<u-popup closeable round="5" :show="show" @close="close" @open="open" mode="center">
			<view class="popup flex-column justify-between p-30">
				<view class="fw-700 text-center sub-size">
					上传凭证
				</view>
				<view class="mt-30">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</view>
				<view class="mt-30">
					<u-button :loading="loading" size="small" type="primary" text="确定上传" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		listingfeeList,
		listingSubmit
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				fileList1: [],
				show: false,
				loading: false,
				id:0,
				pay_proof:"",
				status: 'loading',
				list: [],
				noData: false,
				page: 1,
				total: 0,
			}
		},
		computed: {
			...mapState([]),
		},
		onLoad() {
			this.init()
		},
		methods: {
			close() {
				this.fileList1 = [];
				this.id = 0;
				this.pay_proof = "";
				this.show = false
			},
			open() {
				this.show = true
			},
			pay(e) {
				this.id = e.id;
				this.open();
			},
			submit() {
				let vm = this;
				if (vm.fileList1.length == 0) {
					vm.$u.toast('请上传支付凭证');
					return false;
				}
				if (vm.fileList1.length != 0) {
					vm.pay_proof = vm.fileList1[0].url;
				}
				vm.loading = true;
				listingSubmit({
					id: vm.id,
					pay_proof: vm.pay_proof
				}).then(res => {
					vm.$refs.uToast.show({
						type: 'success',
						message: '上传成功',
						complete() {
							vm.loading = false
							vm.close();
							uni.redirectTo({
								url: '/pages/mine/mine'
							})
						}
					})
				})
			},
			init() {
				this.status = "loading";
				this.list = [];
				this.page = 1;
				this.noData = false;
				this.getList();
			},
			getList() {
				let vm = this;
				let params = {
					'page': this.page,
					'limit': this.$u.config.limit,
				};
				listingfeeList({
					params
				}).then(res => {
					if (res.rows.length != 0) {
						this.noData = false;
						this.list = this.list.concat(res.rows);
						this.total = res.total;
						this.page++;
						this.status = vm.page > Math.ceil(vm.total / vm.$u.config.limit) ? 'nomore' : "loadmore"
					} else {
						this.noData = true;
						this.status = "nomore"
					}

				}).catch(err => {
					vm.$refs.uToast.show({
						type: 'error',
						message: err.message,
						complete() {
							vm.loading = false;
						}
					})
				})
			},
			//上拉
			onPullDownRefresh() {
				this.status = "loading"
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 500);
			},
			//下拉
			onReachBottom() {
				let vm = this;
				this.status = 'loading';
				//延时为了看效果
				setTimeout(() => {
					if (vm.page > Math.ceil(vm.total / this.$u.config.limit)) {
						this.status = 'nomore';
					} else {
						vm.getList();
					}
				}, 200)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 600rpx;
		box-sizing: border-box;
	}
	::v-deep {
		.u-upload__wrap {
			justify-content: center;
		}
	}
</style>